<template>
  <div class="order_assign">
    <el-form :inline="true" :model="searchForm" size="mini" style="margin-left: 10px">
      <el-form-item label="客户">
        <el-input v-model="searchForm.customerName" placeholder="请输入客户名"></el-input>
      </el-form-item>
      <el-form-item label="订单创建日期">
        <el-date-picker
          v-model="searchForm.createTime"
          value-format="yyyy-MM-dd"
          type="daterange"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        ></el-date-picker>
        <el-form-item label="状态">
          <el-select v-model="searchForm.status">
            <el-option :key="STATUS.NOT_DISTRIBUTE" :value="STATUS.NOT_DISTRIBUTE" label="未分配"></el-option>
            <el-option :key="STATUS.DISTRIBUTED" :value="STATUS.DISTRIBUTED" label="已分配"></el-option>
          </el-select>
        </el-form-item>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="search()">查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          size="mini"
          icon="fa fa-file-excel-o"
          @click="exportExcel()"
        >&nbsp;导出到EXCEL</el-button>
      </el-form-item>
    </el-form>
    <el-table size="mini" :data="orderList" :height="getTableHeight(200)">
      <el-table-column prop="orderId" width="170" label="订单号"></el-table-column>
      <el-table-column prop="customerName" width="80" label="客户"></el-table-column>
      <el-table-column label="业务员">
        <template slot-scope="scope">{{scope.row.empName?scope.row.empName:'暂无'}}</template>
      </el-table-column>
      <el-table-column prop="prodName" width="350" label="产品"></el-table-column>
      <el-table-column prop="orderDate" label="创建时间"></el-table-column>
      <el-table-column label="价格">
        <template slot-scope="scope">
          <span>{{scope.row.pricePay?scope.row.pricePay+'元':'暂无'}}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <span class="t-link" @click="showEmployeeAssignDialog(scope.row)">分配业务员</span>
        </template>
      </el-table-column>
    </el-table>
    <!-- 业务员分配对话框 -->
    <el-dialog :visible.sync="employeeSelectDialogVisible" title="业务员分配">
      <el-table
        :data="availableEmployees"
        ref="employSelectTable"
        highlight-current-row
        @current-change="handleEmployeeSelectChange"
      >
        <el-table-column label="姓名">
          <template slot-scope="scope">
            <span class="fa fa-star" v-if="scope.row.offerType==='STAR'"></span>
            {{scope.row.name}}
          </template>
        </el-table-column>
        <el-table-column prop="phone" label="联系电话"></el-table-column>
        <el-table-column label="状态">
          <template slot-scope="scope">{{scope.row.status==="ENABLE"?"已启用":"已禁用"}}</template>
        </el-table-column>
        <el-table-column label="积分总额">
          <template slot-scope="scope">{{scope.row.summary.creditTotal}}</template>
        </el-table-column>
        <el-table-column label="积分余额">
          <template slot-scope="scope">{{scope.row.summary.creditRemain}}</template>
        </el-table-column>
        <el-table-column label="已完成订单数">
          <template slot-scope="scope">{{scope.row.summary.orderQuantityDone}}</template>
        </el-table-column>
        <el-table-column label="服务中订单数">
          <template slot-scope="scope">{{scope.row.summary.orderQuantityServing}}</template>
        </el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleCancel()">取 消</el-button>
        <el-button type="primary" @click="assginEmployee()">确 定</el-button>
      </span>
    </el-dialog>
    <div class="paging-block" style="text-align: center">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pagination.pageNum"
        :page-sizes="[15, 20, 30, 40]"
        :page-size="pagination.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pagination.total"
      ></el-pagination>
    </div>
  </div>
</template>
<script>
import orderMixin from "./order_mixin";
import ajax from "@/api/ajax";
const STATUS = {
  DISTRIBUTED: "DISTRIBUTED",
  NOT_DISTRIBUTE: "NOT_DISTRIBUTE"
};
export default {
  name: "order-assign",
  mixins: [orderMixin],
  data() {
    return {
      STATUS,
      searchForm: {
        customerPhone: "",
        createTime: [],
        status: STATUS.NOT_DISTRIBUTE
      },
      employeeSelectDialogVisible: false,
      // 业务员分配对话框
      employeeSelectOrder: null,
      employeeSelectDialogVisible: false,
      availableEmployees: [], // 可选的业务员
      selectedEmployeeId: null, // 被选中的业务员ID
      showEmployeeAssignDialog(selectedOrder) {
        this.employeeSelectOrder = selectedOrder;
        this.employeeSelectDialogVisible = true;
        let url = `/api/service/${this.employeeSelectOrder.prodId}/employees`;
        ajax
          .get(url, { params: { location: this.employeeSelectOrder.location } })
          .then(resp => {
            let result = resp.data;
            // this.handleOpSuccess(result)
            this.availableEmployees = result.data;
          });
      }
    };
  },
  methods: {
    assginEmployee() {
      if (this.selectedEmployeeId === null) {
        alert("请先选择业务员！");
        return;
      }
      let url = `/api/order/distribute/${this.employeeSelectOrder.orderId}`;
      ajax.put(url, { employeeId: this.selectedEmployeeId }).then(resp => {
        let result = resp.data;
        this.handleOpSuccess(result);
        this.employeeSelectDialogVisible = false;
        this.selectedEmployeeId = null;
        this.search();
      });
    },
    handleCancel() {
      this.employeeSelectDialogVisible = false;
      this.selectedEmployeeId = null;
    },
    handleEmployeeSelectChange(val) {
      this.selectedEmployeeId = val.userId;
    },
    search() {
      let params = Object.assign({}, this.pagination, this.searchForm);
      this.searchOrder(params).then(result => {
        console.log(result);
      });
    }
  },
  created() {
    this.search();
  }
};
</script>

